{% extends "map/new_base.html" %}
{% load comments %}
{% load truncate_filter %}


{% block javascript %}
<style>
.username {display: none;}
#nr1,#nr2 {
              border-top: thick solid #808000;
              min-height: 50px;
              height: auto !important;
              height: 40px;
              width: 15%;
              padding: 10px;
              float: left;
              border-bottom: thick solid #808000; 
          }
          
#nr1 {background-color: #687324;}
#nr2 {background-color: rgb(89, 109, 56);}          
          
#cr1,#cr2 {
              border-top: thick solid #808000;
              float: left;
              width: 65%;
              padding: 10px;
              line-height: 120%;
              min-height: 100px;
              height: auto !important;
              height: 100px;
              border-bottom: thick solid #808000;
          }
          
#cr1 {background-color: #687324;}
#cr2 {background-color: rgb(89, 109, 56);}

          
#cv1,#cv2 {
            float: right;
            width: 10%;
            min-height: 100px;
            height: auto !important;
            height: 100px;
            padding: 10px;
            border-top: thick solid #808000;
            border-bottom: thick solid #808000;
          }
#cv1{background-color: #687324;}
#cv2{background-color: rgb(89, 109, 56);}


</style>

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script src="/assets/javascript/showroute.js"></script>
<script type="text/javascript" src="/assets/javascript/jquery.delay.js">        </script>
<script src="/assets/javascript/labelify.js"></script>



<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAhcP5rdJ8gtI2Tvrvo88B3BR_tirkabJaindNc0FoauOGCOWtrBTLuwigpG4UD6tSDw3AxxYNXLmcVg" type="text/javascript">
</script> 
  

 <script>
    // Nasty hack to get the redirect to work and keep things looking tidy.
    window.onload=function(){
    var e = document.getElementById("com_next");
    var v = window.location.href;
    v = v.split('?')[0];
    e.value = v;
    }
 </script>

  
<script>
var walklist = [];
var icon = new GIcon({
      image: '/assets/map/icons/hiker.png',
      shadow: '/assets/map/icons/hiker.shadow.png',
      size: new GSize(32,32),
      shadowsize: new GSize(59,32),
      iconAnchor: new GPoint(16,32),
      infoWindowAnchor: new GPoint(16,0)
    });
mapper = {
  load: function() {
    if (GBrowserIsCompatible()) {
      mapper.map = new GMap2(document.getElementById("map"));
      mapper.map.setUIToDefault();
      mapper.map.setCenter(new GLatLng(52.1300, -0.2190), 15);
      mapper.map.setMapType(G_HYBRID_MAP);
      // var mapControl = new GMapTypeControl();      
      //mapper.map.addControl(mapControl);
      //mapper.map.addControl(new GLargeMapControl());
      mapper.map.disableScrollWheelZoom();  // This is annoying me, might turn it in to a check box

      
      {% for walk in walks %}
        mapper.walk{{walk.id}} = {{walk.polyline|safe}};
        mapper.walk{{walk.id}}.setStrokeStyle({'color':'{% cycle '#ff0000' '#00ff00' '#0000ff' '#aabbcc' '#ccaabb' %}' });
        mapper.walk{{walk.id}}.poname = "{{walk.name}}";
        mapper.walk{{walk.id}}.polength = Math.round((mapper.walk{{walk.id}}.getLength()/1600)*100)/100;
        walklist.push(mapper.walk{{walk.id}});
        mapper.map.addOverlay(mapper.walk{{walk.id}});
        document.getElementById("walkdist{{walk.id}}").innerHTML = mapper.walk{{walk.id}}.polength;
        mapper.walk{{walk.id}}.startLatLng = mapper.walk{{walk.id}}.getVertex(0);
        mapper.addStartMarker(mapper.walk{{walk.id}}.startLatLng.lat(), mapper.walk{{walk.id}}.startLatLng.lng(), "<b>Start:  {{walk.name}}</b><br/>Length: "+mapper.walk{{walk.id}}.polength+" miles");
        {% if single %}
          mapper.centreOnWalk("walk{{walk.id}}");
        {% endif %}
      {% endfor %}
      
      {% for poi in pois %}
      mapper.addExistingMarker('{{poi.lat}}','{{poi.lon}}','<b>{{poi.name}}</b>{{poi.text|escape|linebreaks}}');
      {% endfor %}
      
      
      {% if user.is_authenticated %}
      mapclick = GEvent.addListener(mapper.map, "click", function(overlay, latlng) {
        if (!latlng) return;
        mapper.addNewMarker(latlng.lat(),latlng.lng());});
      {% endif %}
      };
    },
        
  addNewMarker: function(lat, lng) {
  var gicon = G_DEFAULT_ICON;
  var marker = new GMarker(new GLatLng(lat, lng), {draggable:true, bouncy:true, icon: gicon, title: 'New POI'});
  marker.poi_form = '<input type="text" id="poiname" name="poiname" value="Enter POI name" onclick="mapper.clearText(this)">' +
                    '<textarea id="poitext" onclick="mapper.clearText(this)" >Type your POI information here</textarea>' +
                    '<input id="poisubmit" type="submit" name="Submit" onclick="mapper.markerPost()">';
  GEvent.addListener(marker, "click", function() {this.openInfoWindowHtml(this.poi_form, {maxWidth: 320});});
  mapper.map.addOverlay(marker);
  GEvent.removeListener(mapclick);
  poi_marker = marker;
  },

  addExistingMarker: function(lat, lng, text) {
  var that = this;
  //var gicon = new GIcon();
  var gicon = G_DEFAULT_ICON;
  var marker = new GMarker(new GLatLng(lat, lng), {draggable:false, bouncy:false, icon: gicon, title: text.replace(/(<([^>]+)>)/ig,"")});
  marker.poi_form = text;
  GEvent.addListener(marker, "click", function() {this.openInfoWindowHtml(this.poi_form, {maxWidth: 320});});
  mapper.map.addOverlay(marker);
  },
  
  addStartMarker: function(lat, lng, text) {
  var marker = new GMarker(new GLatLng(lat, lng), {draggable:false, bouncy:false, icon: icon, title: text.replace(/(<([^>]+)>)/ig,"")});
  marker.poi_form = text;
  GEvent.addListener(marker, "click", function() {this.openInfoWindowHtml(this.poi_form, {maxWidth: 320});});
  mapper.map.addOverlay(marker);
  },

 toggleWalk: function(iwalk) {
  walkCheckbox = 'check'+iwalk;
   if (document.getElementById(walkCheckbox).checked) {
     mapper[iwalk].show();
   }
   else {
     mapper[iwalk].hide();
   }
  },

  centreOnWalk: function(iwalk) {
  var bounds = mapper[iwalk].getBounds();
  var centreWalk = bounds.getCenter();
  mapper.map.setCenter(centreWalk);
  },
  
  markerPost: function() {
  poidescr = document.getElementById('poitext').value;
  poiname = document.getElementById('poiname').value;
  poi_marker.poi_form = '<b>'+poiname+'</b><br/>'+poidescr;
  poi_marker.closeInfoWindow();
  poi_lat = poi_marker.getLatLng().lat();
  poi_lon = poi_marker.getLatLng().lng();
  route_id = '{{singlewalk.id}}';
  $.post('/poipost', {lat:poi_lat, lon:poi_lon, text:poidescr, name:poiname, routeid:route_id});
  return false;
  },
  
  clearText: function(e) {
  e.value='';
  e.onclick = '';
  }
};
</script>
   <script type="text/javascript" src="/assets/javascript/jquery.rater.js">        </script>
     <link rel="stylesheet"  href="/assets/javascript/raterstyle.css"          type="text/css" />


{% if stars_writable %}
     <script type="text/javascript">
       $(function() {
          $('#wrater{{singlewalk.id}}').rater({ postHref: '/wstars',rating: {{singlewalk.rating_out_of_five}} });
        });
      </script>
   {% endif %}

<script type="text/javascript" src="/assets/javascript/labelify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".labelify").labelify();
});
</script>

{% endblock %}
  
{% block title %}Potton Online | Walks around Potton {{singlewalk.id}}{%endblock%}  
  
{% block bodytag %} onload="mapper.load()" onunload="GUnload()" {% endblock %}

{% block page_middle %}
{% if single %}
<div id="wrater{{singlewalk.id}}" style="float: right;"> 
  <div class="stat">
    <div class="ui-rater">
      <div class="ui-rater-starsOff"  style="width: 90px;">
        <div class="ui-rater-starsOn" style="width: {{width}}px;">
        </div>
      </div>
    </div>
       <span style="clear: both;">
  {% if singlewalk.rateable %}
  Rated: {% ifequal singlewalk.rating_out_of_five None %}0{% else %}{{singlewalk.rating_out_of_five|floatformat:"-2"}}{% endifequal %} 
  from a total of <span class="ui-rater-rateCount">{% ifequal singlewalk.total_rates None %}0{% else %}{{singlewalk.total_rates|floatformat}}{% endifequal %}</span>
  {% endif %}
  </span>
  </div>
</div>
{% endif %}

<h1>Walks around Potton.</h1>

{% if single %}
{% for walk in walks %}
 <h2>{{walk.name}}</h2>
Use the map controls to zoom in and out.  Click and drag the map to move.<br/>
<br />
<h3>Add a Point Of Interest to a walk</h3>
If you want to share a Point Of Interest (POI) along this walk click on the map to place a new POI marker.  Drag it to the correct location and then click on the red marker to open the Info Window.
  Type your information in to the boxes and click Submit.  Now, anyone looking at this map can see you Point Of Interest overlayed on to the map.<br /><br /><br />
{% endfor %}
{% else %}
{% if walks %}
<h2>Here you can see walking routes around potton</h2>
You can see more details of a particular route by clicking on its name from the list below the map.  You can toggle the route overlay by using the tick boxes next to the name.<br />
<h3>Do you know a walk around Potton that's not on the map?</h3>Why not add it by clicking: <a href="/addwalk">add a new walk.</a>
{% else %}
At the moment there aren't any walks available.  Why not <a href="/addwalk">add one?</a>.<br/><br/>
{% endif %}
{% endif %}

<div id="map" style="width:100%; height:500px"></div>


{% for walk in walks %}
  <span style="background-color: {% cycle '#ff0000' '#00ff00' '#0000ff' '#aabbcc' '#ccaabb' %}"><input id="checkwalk{{walk.id}}"type="checkbox" checked="CHECKED" onclick="mapper.toggleWalk('walk{{walk.id}}')"> {{walk.id}}.  {% if single %}{{walk.name}}{% else %}<a href="/walks/{{walk.id}}">{{walk.name}}</a>{%endif%}  </span> Distance = approx: <span id="walkdist{{walk.id}}"></span> miles. <br />
  {% if single %}<br/> <br/> {{walk.text}}<br/> <br/>  {% else %}{{walk.text|truncatesmart:80}}  <br /><br />{% endif %}

{% endfor %}
{% if singlewalk %}
<div id="comments" >
  {% get_comment_count for singlewalk as comment_count %}
  <h4>Comments:  {{comment_count}}</h4>
  {% get_comment_list for singlewalk as comment_list %}

  {% for comment in comment_list %}
      <div id="{% cycle 'nr1' 'nr2' %}">
        <span style="font-weight: bold;">{{comment.user_name|capfirst}}</span><br />
        <span style="font-size: 0.7em;">{{comment.submit_date|date:" d M Y / H:m"}}</span>
      </div>
      
      <div id="{% cycle 'cr1' 'cr2' %}">
        {{comment.comment}}
      </div>
      
      <div id="{% cycle 'cv1' 'cv2' %}">
        <a title="Vote up" id="u{{comment.id}}" {% if user.is_authenticated %} class="voteup" href="/vote/" {% endif %}>
        <img style="padding-right: 5px;" id="imgu{{comment.id}}" src="/utils/graphics/pctimage/?comment_id={{comment.id}}&returntype=good"></a>
        <a title="Vote down" id="d{{comment.id}}" {% if user.is_authenticated %}  class="votedown" href="/vote/" {% endif %} >
        <img id="imgd{{comment.id}}" src="/utils/graphics/pctimage/?comment_id={{comment.id}}&returntype=bad"></a>
        <br /><span style="font-size: 0.7em;">Rating:</span>  <img title="How valid is this comment" id="imgpc{{comment.id}}" src="/utils/graphics/pctimage/?comment_id={{comment.id}}" />
      </div>
      
      <hr />
  {% endfor %}
</div>
<hr />


<div id="commentform" >

    <h1>Comment:</h1>
    <span style="clear: both;">
    {% get_comment_form for singlewalk as form %}
    <form action="{% comment_form_target %}" method="POST">
                    {% if user.is_authenticated %}
                    <span class="username"><input id="id_name" type="text" name="name" value="{{user.username}}" maxlength="50" /></span>
                    {% else %}
                    <input class="labelify" id="id_name" type="text" name="name"   title="Enter your nickname" /><br />
                    <input class="labelify" id="id_email" type="text" name="email" title="Enter your email address " /><br />                    
                    {% endif %}
                    <span class="username"><input id="com_next" type="text" name="next" value="/walks/{{singlewalk.id}}" /></span>
                    {{ form.content_type }}
                    {{ form.object_pk }}
                    {{ form.timestamp }}
                    {{ form.security_hash }}
                    <textarea class="labelify" id="id_comment" rows="4" cols="70" name="comment" title="Type your comment"></textarea>
                    
                    <span class="username">{{ form.honeypot}}</span>
                    <input type="submit" title="Click to submit your comment" value="Submit comment">

    </span>
  <hr />
</div>
{% endif %}

{% endblock %}

{% block page_left %}
  {% include 'map/default_pageleft.html' %}
{% endblock %}

{% block page_right %}
  {% include 'map/default_pageright.html' %}
{% endblock %}
